<template>
	<view class="detail-container">
		<u-navbar title="隐患详情" :is-back="true" back-icon-color="#ffffff" title-color="#ffffff" :background="{ background: '#1a4380' }"></u-navbar>
		<view class="content">
			<view class="info-card">
				<view class="info-item">
					<text class="label">隐患描述：</text>
					<text class="value">{{dangerInfo.hazardDesc || '暂无'}}</text>
				</view>
				<view class="info-item" v-if="dangerInfo.level">
					<text class="label">隐患等级：</text>
					<text class="value" :class="levelClass">{{dangerInfo.level}}</text>
				</view>
				<view class="info-item">
					<text class="label">发现时间：</text>
					<text class="value">{{formatDateTime(dangerInfo.discoveryTime) || '暂无'}}</text>
				</view>
				<view class="info-item">
					<text class="label">隐患位置：</text>
					<text class="value">{{dangerInfo.hazardLocation || '暂无'}}</text>
				</view>
				<view class="info-item" v-if="dangerInfo.imagePaths && dangerInfo.imagePaths.length">
					<text class="label">隐患图片：</text>
					<view class="image-list">
						<image v-for="(img, index) in dangerInfo.imagePaths" :key="index" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
					</view>
				</view>
				<view class="info-item">
					<text class="label">处理状态：</text>
					<text class="value" :class="statusClass">{{statusText}}</text>
				</view>
				<view class="info-item" v-if="dangerInfo.updateTime && dangerInfo.status !== 0">
					<text class="label">更新时间：</text>
					<text class="value">{{formatDateTime(dangerInfo.updateTime)}}</text>
				</view>
				<view class="info-item" v-if="dangerInfo.handler">
					<text class="label">处理人：</text>
					<text class="value">{{dangerInfo.handler}}</text>
				</view>
			</view>
			
			<view class="btn-group" v-if="dangerInfo.status === 0">
				<button class="btn primary" @click="handleDanger">处理隐患</button>
			</view>
			
			<view class="btn-group" v-if="dangerInfo.status === 1">
				<button class="btn primary" @click="goToProcess">处理隐患</button>
			</view>
			
			<view class="handle-form" v-if="showHandleForm">
				<view class="form-title">处理记录</view>
				<view class="form-item">
					<text class="form-label">处理结果</text>
					<textarea class="form-input" v-model="handleResult" placeholder="请输入处理结果"></textarea>
				</view>
				<view class="form-item">
					<text class="form-label">上传图片</text>
					<view class="upload-box">
						<view class="upload-item" v-for="(item, index) in handleImages" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-icon" @click="deleteImage(index)">×</view>
						</view>
						<view class="upload-btn" @click="chooseImage" v-if="handleImages.length < 4">
							<text class="iconfont icon-camera"></text>
							<text class="upload-text">上传</text>
						</view>
					</view>
				</view>
				<view class="form-btns">
					<button class="cancel-btn" @click="cancelHandle">取消</button>
					<button class="submit-btn" @click="submitHandle">提交</button>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="showLoading" mode="center" :closeable="false">
			<view class="loading-popup">
				<u-loading :show="true" mode="circle" color="#1a4380"></u-loading>
				<text class="loading-text">处理中...</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			dangerInfo: {},
			showHandleForm: false,
			handleResult: '',
			handleImages: [],
			showLoading: false
		}
	},
	computed: {
		statusText() {
			const status = this.dangerInfo.status
			if (status === 0) return '待审核'
			if (status === 1) return '待处理'
			if (status === 2) return '待验证'
			if (status === 3) return '已完成'
			return '未知状态'
		},
		statusClass() {
			const status = this.dangerInfo.status
			if (status === 0) return 'status-pending'
			if (status === 1) return 'status-done'
			if (status === 2) return 'status-closed'
			return ''
		},
		levelClass() {
			if (!this.dangerInfo.level) return ''
			
			const levelMap = {
				'严重': 'level-serious',
				'一般': 'level-normal',
				'轻微': 'level-minor'
			}
			return levelMap[this.dangerInfo.level] || ''
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id
			this.getDangerDetail()
		}
	},
	methods: {
		// 获取隐患详情
		getDangerDetail() {
			console.log('获取隐患详情，ID:', this.id)
			uni.showLoading({
				title: '加载中'
			})
			
			// 实际项目中从API获取
			uni.request({
				url: 'http://172.20.10.3:9527/security/hazard/getOneById',
				method: 'GET',
				data: {
					id: this.id
				},
				success: (res) => {
					console.log('详情数据:', res.data)
					if (res.statusCode === 200 && res.data.code === 200) {
						this.dangerInfo = res.data.data
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.message || '获取隐患详情失败'
						})
					}
				},
				fail: (err) => {
					console.error('请求失败:', err)
					this.$refs.uToast.show({
						type: 'error',
						message: '网络异常，请稍后重试'
					})
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		},
		// 格式化日期时间
		formatDateTime(dateString) {
			if (!dateString) return ''
			const date = new Date(dateString)
			const year = date.getFullYear()
			const month = (date.getMonth() + 1).toString().padStart(2, '0')
			const day = date.getDate().toString().padStart(2, '0')
			const hour = date.getHours().toString().padStart(2, '0')
			const minute = date.getMinutes().toString().padStart(2, '0')
			
			return `${year}-${month}-${day} ${hour}:${minute}`
		},
		// 处理隐患
		handleDanger() {
			this.showHandleForm = true
		},
		// 跳转到处理页面
		goToProcess() {
			uni.navigateTo({
				url: `/pages/hidden-danger/process?id=${this.id}`
			});
		},
		// 取消处理
		cancelHandle() {
			this.showHandleForm = false
			this.handleResult = ''
			this.handleImages = []
		},
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 4 - this.handleImages.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.handleImages = [...this.handleImages, ...res.tempFilePaths]
				}
			})
		},
		// 删除图片
		deleteImage(index) {
			this.handleImages.splice(index, 1)
		},
		// 提交处理结果
		submitHandle() {
			if (!this.handleResult) {
				this.$refs.uToast.show({
					type: 'error',
					message: '请输入处理结果'
				})
				return
			}
			
			this.showLoading = true
			
			// 先上传图片，再提交处理结果
			this.uploadImages(() => {
				// 模拟处理隐患的请求
				setTimeout(() => {
					this.showLoading = false
					this.dangerInfo.status = 1
					this.dangerInfo.handler = '当前用户姓名' // 实际应该从用户信息中获取
					this.dangerInfo.updateTime = new Date().toISOString()
					this.showHandleForm = false
					
					this.$refs.uToast.show({
						type: 'success',
						message: '处理成功'
					})
				}, 1500)
			})
		},
		// 上传图片
		uploadImages(callback) {
			if (this.handleImages.length === 0) {
				callback()
				return
			}
			
			const uploadedImages = []
			let count = 0
			
			this.handleImages.forEach(path => {
				// 实际项目中应该调用上传API
				// 模拟上传成功
				setTimeout(() => {
					uploadedImages.push('http://example.com/uploaded-' + new Date().getTime() + '.jpg')
					count++
					
					if (count === this.handleImages.length) {
						// 所有图片上传完成
						callback()
					}
				}, 500)
			})
		},
		// 预览图片
		previewImage(current) {
			uni.previewImage({
				urls: this.dangerInfo.imagePaths,
				current: current
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.content {
		padding: 20rpx;
	}
	
	.info-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.info-item {
			margin-bottom: 24rpx;
			
			.label {
				color: #666;
				font-size: 28rpx;
				margin-right: 10rpx;
			}
			
			.value {
				color: #333;
				font-size: 28rpx;
				word-break: break-all;
			}
			
			.status-pending {
				color: #ff9900;
			}
			
			.status-done {
				color: #19be6b;
			}
			
			.status-closed {
				color: #909399;
			}
			
			.level-serious {
				color: #fa3534;
			}
			
			.level-normal {
				color: #ff9900;
			}
			
			.level-minor {
				color: #909399;
			}
			
			.image-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;
				
				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
	
	.btn-group {
		margin-top: 40rpx;
		padding: 0 20rpx;
		
		.btn {
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			border-radius: 44rpx;
			
			&.primary {
				background-color: #1a4380;
				color: #fff;
			}
		}
	}
	
	.handle-form {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.form-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.form-item {
			margin-bottom: 30rpx;
			
			.form-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 15rpx;
			}
			
			.form-input {
				width: 100%;
				height: 200rpx;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
			
			.upload-box {
				display: flex;
				flex-wrap: wrap;
				
				.upload-item, .upload-btn {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;
				}
				
				.upload-item {
					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					
					.delete-icon {
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, 0.5);
						color: #fff;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.upload-btn {
					background-color: #f8f8f8;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					.iconfont {
						font-size: 50rpx;
						color: #999;
					}
					
					.upload-text {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}
		
		.form-btns {
			display: flex;
			justify-content: space-between;
			
			button {
				width: 48%;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 32rpx;
				border-radius: 44rpx;
			}
			
			.cancel-btn {
				background-color: #f2f2f2;
				color: #666;
			}
			
			.submit-btn {
				background-color: #1a4380;
				color: #fff;
			}
		}
	}
	
	.loading-popup {
		width: 240rpx;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
}
</style> 